<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
    <div class="col">
        <form action="/filterGPU/" method="post">
            {% csrf_token %}
            <table class="table table-hover">
                <tbody>
                <tr>
                    <th>品牌</th>
                    <td>
                        <select class="custom-select" name="Brand">
                            <option selected value="">选择品牌</option>
                            <option value="七彩虹">七彩虹</option>
                            <option value="影驰">影驰</option>
                            <option value="索泰">索泰</option>
                            <option value="msi微星">msi微星</option>
                            <option value="耕升">耕升</option>
                            <option value="铭瑄">铭瑄</option>
                            <option value="蓝宝石">蓝宝石</option>
                            <option value="华硕">华硕</option>
                            <option value="镭风">镭风</option>
                            <option value="迪兰">迪兰</option>
                            <option value="小影霸">小影霸</option>
                            <option value="ASL翔升">ASL翔升</option>
                            <option value="NVIDIA">NVIDIA</option>
                            <option value="AMD">AMD</option>
                            <option value="盈通">盈通</option>
                            <option value="映众">映众</option>
                            <option value="丽台">丽台</option>
                            <option value="XFX讯景">XFX讯景</option>
                            <option value="撼讯">撼讯</option>
                            <option value="华擎">华擎</option>
                            <option value="磐镭">磐镭</option>
                            <option value="瀚铠">瀚铠</option>
                            <option value="蓝戟">蓝戟</option>
                            <option value="EVGA">EVGA</option>
                            <option value="AX电竞叛客">AX电竞叛客</option>
                            <option value="Intel">Intel</option>
                            <option value="昂达">昂达</option>
                            <option value="梅捷">梅捷</option>
                            <option value="万丽">万丽</option>
                            <option value="摩尔线程">摩尔线程</option>
                            <option value="铭鑫">铭鑫</option>
                            <option value="艾尔莎">艾尔莎</option>
                            <option value="铭影">铭影</option>
                            <option value="欧比亚">欧比亚</option>
                            <option value="网易严选">网易严选</option>
                            <option value="旌宇">旌宇</option>
                            <option value="星齐美">星齐美</option>
                            <option value="PNY">PNY</option>
                            <option value="同德">同德</option>
                            <option value="映泰">映泰</option>
                            <option value="双敏">双敏</option>
                            <option value="苹果">苹果</option>
                            <option value="HIS">HIS</option>
                            <option value="小妖G">小妖G</option>
                            <option value="赛影">赛影</option>
                            <option value="北影">北影</option>
                            <option value="磐石">磐石</option>
                            <option value="明硕">明硕</option>
                            <option value="凌枫">凌枫</option>
                            <option value="little" shadow ba>little</option>
                            <option value="卡诺基">卡诺基</option>
                            <option value="影帝">影帝</option>
                            <option value="银狐">银狐</option>
                            <option value="悦升">悦升</option>
                            <option value="精影">精影</option>
                            <option value="铭驰">铭驰</option>
                            <option value="乔帝">乔帝</option>
                            <option value="禾美">禾美</option>
                            <option value="精雷">精雷</option>
                            <option value="东翎">东翎</option>
                            <option value="正扬">正扬</option>
                            <option value="富彩">富彩</option>
                            <option value="丹丁">丹丁</option>
                            <option value="祺祥">祺祥</option>
                            <option value="斯巴达克">斯巴达克</option>
                            <option value="杰微">杰微</option>
                            <option value="富士康">富士康</option>
                            <option value="太阳花">太阳花</option>
                            <option value="启亨">启亨</option>
                            <option value="金鹰">金鹰</option>
                            <option value="捷波">捷波</option>
                            <option value="MATROX">MATROX</option>
                            <option value="鑫益嘉">鑫益嘉</option>
                            <option value="耕枡">耕枡</option>
                            <option value="景钛">景钛</option>
                            <option value="恩微">恩微</option>
                            <option value="琪诺达">琪诺达</option>
                            <option value="鸿基">鸿基</option>
                            <option value="卓锐">卓锐</option>
                            <option value="威航">威航</option>
                            <option value="维博特">维博特</option>
                            <option value="天机">天机</option>
                            <option value="驭威">驭威</option>
                            <option value="德众">德众</option>
                            <option value="爱林莎">爱林莎</option>
                            <option value="精英">精英</option>
                            <option value="技嘉">技嘉</option>

                        </select>
                    </td>
                </tr>

                <tr>
                    <th>显卡芯片</th>
                    <td>
                        <select class="custom-select" name="GPUType">
                            <option selected value="">选择显卡芯片</option>
                            <option value="RTX 4090">RTX 4090</option>
                            <option value="RTX 4080">RTX 4080</option>
                            <option value="RTX 3090Ti">RTX 3090Ti</option>
                            <option value="RTX 3090">RTX 3090</option>
                            <option value="RTX 3080Ti">RTX 3080Ti</option>
                            <option value="RTX 3080">RTX 3080</option>
                            <option value="RTX 3070Ti">RTX 3070Ti</option>
                            <option value="RTX 3070">RTX 3070</option>
                            <option value="RTX 3060Ti">RTX 3060Ti</option>
                            <option value="RTX 3060">RTX 3060</option>
                            <option value="RTX 3050">RTX 3050</option>
                            <option value="RTX 2080Ti">RTX 2080Ti</option>
                            <option value="RTX 2080 SUPER">RTX 2080 SUPER</option>
                            <option value="RTX 2070 SUPER">RTX 2070 SUPER</option>
                            <option value="RTX 2060 SUPER">RTX 2060 SUPER</option>
                            <option value="RTX 2080">RTX 2080</option>
                            <option value="RTX 2070">RTX 2070</option>
                            <option value="RTX 2050">RTX 2050</option>
                            <option value="RTX 2060">RTX 2060</option>
                            <option value="GTX 1660Ti">GTX 1660Ti</option>
                            <option value="GTX 1660">GTX 1660</option>
                            <option value="GTX 1660 SUPER">GTX 1660 SUPER</option>
                            <option value="GTX 1650">GTX 1650</option>
                            <option value="GTX 1650 SUPER">GTX 1650 SUPER</option>
                            <option value="GTX 1080Ti">GTX 1080Ti</option>
                            <option value="GTX 1080">GTX 1080</option>
                            <option value="GTX 1070Ti">GTX 1070Ti</option>
                            <option value="GTX 1070">GTX 1070</option>
                            <option value="GTX 1060">GTX 1060</option>
                            <option value="GTX 1050Ti">GTX 1050Ti</option>
                            <option value="GTX 1050">GTX 1050</option>
                            <option value="GT 1030">GT 1030</option>
                            <option value="RX 6950 XT">RX 6950 XT</option>
                            <option value="RX 6900 XT">RX 6900 XT</option>
                            <option value="RX 6800 XT">RX 6800 XT</option>
                            <option value="RX 6800">RX 6800</option>
                            <option value="RX 6750 XT">RX 6750 XT</option>
                            <option value="RX 6700 XT">RX 6700 XT</option>
                            <option value="RX 6650 XT">RX 6650 XT</option>
                            <option value="RX 6600 XT">RX 6600 XT</option>
                            <option value="RX 6600">RX 6600</option>
                            <option value="RX 6500 XT">RX 6500 XT</option>
                            <option value="RX 5700 XT">RX 5700 XT</option>
                            <option value="RX 5700">RX 5700</option>
                            <option value="RX 5600 XT">RX 5600 XT</option>
                            <option value="RX 5500 XT">RX 5500 XT</option>
                            <option value="RX Vega 64">RX Vega 64</option>
                            <option value="Radeon VII">Radeon VII</option>
                            <option value="RX Vega 56">RX Vega 56</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <th>显存容量</th>
                    <td>
                        <select class="custom-select" name="GRAMCapacity">
                            <option selected value="">选择显存容量</option>
                            <option value="24GB">24GB</option>
                            <option value="16GB">16GB</option>
                            <option value="12GB">12GB</option>
                            <option value="11GB">11GB</option>
                            <option value="10GB">10GB</option>
                            <option value="8GB">8GB</option>
                            <option value="6GB">6GB</option>
                            <option value="4GB">4GB</option>
                            <option value="3GB">3GB</option>
                            <option value="2GB">2GB</option>
                            <option value="1GB">1GB</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <th>显存类型</th>
                    <td>
                        <select class="custom-select" name="GRAMType">
                            <option selected value="">选择显存类型</option>
                            <option value="GDDR6X">GDDR6X</option>
                            <option value="GDDR6">GDDR6</option>
                            <option value="GDDR5X">GDDR5X</option>
                            <option value="GDDR5">GDDR5</option>
                            <option value="GDDR3">GDDR3</option>
                            <option value="HBM2">HBM2</option>
                            <option value="HBM">HBM</option>
                        </select>
                    </td>
                </tr>
                </tbody>
                <tr>
                    <td></td>
                    <th>
                        <button type="submit" class="btn btn-primary">筛选</button>
                    </th>
                </tr>

            </table>
        </form>
    </div>
    <div class="col">
        {% for case in cases %}
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">{{case.Name}}</h5>
                <p class="card-text">显存容量:{{case.GRAMCapacity}}</p>
                <p class="card-text">显存类型:{{case.GRAMType}}</p>
                <p class="card-text">价格:￥{{case.Price}}</p>
                <div class="btn-group" role="group" aria-label="Basic example">
                    <form action="/configReturnGPU/" method="post">
                        {% csrf_token %}
                        <input name="id" hidden="hidden" value="{{case.Name}}">
                        <button type="submit" class="btn btn-primary">添加到配置单</button>
                    </form>
                    <form action="/moreInfoGPU/" method="post">
                        {% csrf_token %}
                        <input name="id" hidden="hidden" value="{{case.Name}}">
                        <button type="submit" class="btn btn-primary">详细信息</button>
                    </form>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
</body>
</html>